<template>
  <!-- <img v-if="ModelClassInfor.modelUrl" :src="ModelClassInfor.modelUrl" :style="mstyle"> -->
  <div v-if="ModelClassInfor.modelUrl" ref="dragMoveItemRef" @mousedown="startDrag" @touchstart="startDrag"
    @click="selectItem" :style="mstylezz" :class="ModelClassInfor.clsName">
    <img :src="ModelClassInfor.modelUrl" :style="mstyleImg">
  </div>
  <div v-else="ModelClassInfor.modelUrl === ''" ref="dragMoveItemRef" :class="ModelClassInfor.clsName"
    @mousedown="startDrag" @touchstart="startDrag" @click="selectItem" :style="mstyle">
  </div>
</template>

<script>
import { Showroom3DStore } from "@/pinia/Showroom3D";
const s3Store = Showroom3DStore();

export default {
  props: {
    propsAttribute: {
      type: Object,
      default: () => {
        return {
          modelId: '',
          modelName: '',
          modelUrl: '',
          modelType: '',
          modelStyle: 'mstyle',
          clsName: 'drag-move-item',
          height: 96,
          width: 96,
          offsetX: 0,
          offsetY: 0,
          zIndex: 3,
          positionX: 0,
          positionY: 0,
        };
      }
    }
  },
  data () {
    return {
      dragging: false,
      ModelClassInfor: {
        modelId: '',
        modelName: '',
        modelUrl: '',
        modelType: 'lamp',
        modelStyle: 'mstyle',
        clsName: 'drag-move-item',
        height: 96,
        width: 96,
        offsetX: 0,
        offsetY: 0,
        zIndex: 3,
        positionX: 0,
        positionY: 0,
      }
    };
  },
  computed: {
    mstyleImg () {
      return {
        width: `${this.ModelClassInfor.width}px`,
        height: `${this.ModelClassInfor.height}px`,
        position: 'absolute'
      };
    },
    mstylezz () {
      return {
        transform: `translate(${this.ModelClassInfor.positionX}px, ${this.ModelClassInfor.positionY}px)`,
        width: `${this.ModelClassInfor.width}px`,
        height: `${this.ModelClassInfor.height}px`,
        position: 'absolute',
        background: 'initial'
      };
    },
    mstyle () {
      return {
        transform: `translate(${this.ModelClassInfor.positionX}px, ${this.ModelClassInfor.positionY}px)`,
        width: `${this.ModelClassInfor.width}px`,
        height: `${this.ModelClassInfor.height}px`,
        position: 'absolute',
        opacity: this.isEditStatus ? 0.6 : 0.8,
      };
    },
    isEditStatus () {
      return s3Store.editStatus;
    }
  },
  created () {
    this.ModelClassInfor.modelId = this.propsAttribute.modelId;
    this.ModelClassInfor.modelName = this.propsAttribute.modelName;
    this.ModelClassInfor.modelUrl = this.propsAttribute.modelUrl;
    this.ModelClassInfor.modelType = this.propsAttribute.modelType;
    this.ModelClassInfor.clsName = this.propsAttribute.clsName
    this.ModelClassInfor.width = this.propsAttribute.width;
    this.ModelClassInfor.height = this.propsAttribute.height;
    this.ModelClassInfor.zIndex = this.propsAttribute.zIndex;
    this.ModelClassInfor.offsetX = this.propsAttribute.offsetX;
    this.ModelClassInfor.offsetY = this.propsAttribute.offsetY;
    this.ModelClassInfor.positionX = this.propsAttribute.positionX;
    this.ModelClassInfor.positionY = this.propsAttribute.positionY;
  },
  mounted () {
    console.log('初始化模型成功：', this.propsAttribute.modelId);
    // 获取所有的img元素
    const images = document.querySelectorAll('img');
    console.log('images:', images);
    // 为每个img添加事件监听器
    images.forEach(function (img) {
      img.addEventListener('dragstart', function (event) {
        // 阻止dragstart事件，移除拖拽功能
        event.preventDefault();
      });
    });
  },
  methods: {
    selectItem () {
      this.$emit('showAttribute', { modelId: this.ModelClassInfor.modelId, dom: this.$refs.dragMoveItemRef })
    },
    startDrag (event) {
      if (this.isEditStatus) {
        this.dragging = true;
        this.ModelClassInfor.offsetX = event.clientX - this.ModelClassInfor.positionX;
        this.ModelClassInfor.offsetY = event.clientY - this.ModelClassInfor.positionY;
        document.addEventListener('mousemove', this.drag);
        document.addEventListener('touchmove', this.drag);
        document.addEventListener('mouseup', this.stopDrag);
        document.addEventListener('touchend', this.stopDrag);
      }
    },
    drag (event) {
      if (this.dragging) {
        this.ModelClassInfor.positionX = event.clientX - this.ModelClassInfor.offsetX;
        this.ModelClassInfor.positionY = event.clientY - this.ModelClassInfor.offsetY;
      }
    },
    stopDrag () {
      this.dragging = false;
      document.removeEventListener('mousemove', this.drag);
      document.removeEventListener('touchmove', this.drag);
      document.removeEventListener('mouseup', this.stopDrag);
      document.removeEventListener('touchend', this.stopDrag);
    }
  },
};
</script>

<style>
.drag-move-item {
  width: 6.88rem;
  height: 6.88rem;
  background-color: gray;
  position: absolute;
  cursor: move;
  user-select: none;
}

.drag-move-item:active {
  cursor: pointer;
}

.selected:before {
  width: 100%;
  height: 100%;
}

.selected:before,
.selected:after {
  box-shadow: 0 0 0 0.25em #e8e7fe inset, 0 0 1.5em 0.5em #180df2b3 inset, 0 0 1.5em 0.25em #180df2b3, 0 0 7.5em #180df280 inset, 0 0 7.5em #180df280;
  content: "";
  display: block;
  user-select: none;
}

.selected {
  cursor: move;
}
</style>